import React, { memo,useEffect } from 'react'

import type { ReactNode } from 'react'
import { TopRankingWrapper } from './style'
import { useAppSelector,shallowEqualApp } from '@/store'
import classNames from 'classnames'
import { getImageSize } from '@/utils/HandlerImg'
import { useAppDispatch } from '@/store'
import { changeCurrentIndexAction,fetchRankingListAction } from '../../store/ranking'


interface IProps {
  children?: ReactNode
}

const TopRanking: React.FC<IProps> = () => {
  const { topList,currentIndex } = useAppSelector(state => ({
    topList: state.ranking.topList,
    currentIndex: state.ranking.currentIndex
  }),shallowEqualApp)
//   console.log(topList,'// 片段1');
  const dispatch = useAppDispatch()

    useEffect(() => {
    const id = (topList[currentIndex] && topList[currentIndex].id);
    console.log(id,'id');
    if (!id) return;
    dispatch(fetchRankingListAction({id}))
  }, [dispatch, currentIndex])
  const handlerItemClick = (index: number) => {
    console.log(index)
    dispatch(changeCurrentIndexAction(index))
  }

  return (
    <TopRankingWrapper>
       {
        topList.map((item, index) => {
          let header;
          if (index === 0 || index === 4) {
            header = <div className="header">{index === 0 ? "云音乐特色榜" : "全球媒体榜"}</div>
          }
          return (
            <div key={item.id}>
              {header}
              <div className={classNames("item", { "active": index === currentIndex })}
                onClick={() => handlerItemClick(index)}>
                <img src={getImageSize(item.coverImgUrl, 40)} alt="" />
                <div className="info">
                  <div className="name">{item.name}</div>
                  <div className="update">{item.updateFrequency}</div>
                </div>
              </div>
            </div>
          )
        })
      }
    </TopRankingWrapper>
  )
}

export default memo(TopRanking)
